<template>
  <view class="RemoteEquipment">
    <base-navbar :title="title"> </base-navbar>
    <view class="remote">
      <!-- 顶部区域 -->
      <view class="content_top" v-show="slider">
        正在刷新{{ value }}%
        <BaseSlider :value="value"></BaseSlider>
      </view>
      <!-- 内容区域 -->
      <view class="remote_content" v-if="vUserInfo.role_id != 6">
        <!-- 内容区域顶部 -->
        <!-- <view class="content_top"> </view> -->

        <view class="remote_top">
          <view>设备编号：{{ device_sn ? device_sn : "" }}</view>
          <view>{{ vPointName }}名称：{{ hotelLocation ? hotelLocation : "" }}</view>
          <view class="off_title_box">
            <view class="center_off">
              <view class="center_off_text">
                设备状态:
              </view>
              <view class="center_off_adio">
                <view :class="status == 0 ? '' : 'light_off'">
                  在线
                </view>
                <view :class="status == 0 ? 'light_on' : ''">
                  离线
                </view>
              </view>
            </view>
          </view>
          <view class="off_title_box" v-if="false">
            <view class="center_off">
              <view>
                灯光开启时间:
              </view>
              <view>
                {{ startTime }}-{{ endTime }}
              </view>
            </view>
          </view>
        </view>
        <!-- 内容区域中间部分 -->
        <view class="content_center">
          <view>
            <view class="bilud" @click="start(0)">
              <img src="./../../static/img/icon/end.png" alt="" />
            </view>
            <view class="center_2">启动设备</view>
          </view>
          <view>
            <view class="bilud" @click="stop(-1)">
              <img src="./../../static/img/icon/stop.png" alt="" />
            </view>
            <view class="center_2">停止设备</view>
          </view>
        </view>
        <!-- 开关按钮 -->
        <view class="content_bottom" v-if="false">
          <view class="off_box">
            <view class="center_off">
              <view class="center_off_text">
                灯光
              </view>
              <view class="center_off_adio">
                <view :class="light ? '' : 'light_off'">
                  ON
                </view>
                <view :class="light ? 'light_on' : ''">
                  OFF
                </view>
              </view>
            </view>
            <view class="center_off">
              <view class="center_off_text">
                提示音
              </view>
              <view class="center_off_adio">
                <view :class="music ? '' : 'light_off'">
                  ON
                </view>
                <view :class="music ? 'light_on' : ''">
                  OFF
                </view>
              </view>
            </view>
            <view class="off_updata" @click="updata" :style="{ pointerEvents: disable ? 'none' : '' }">
              <text>刷新</text><u-icon name="reload" color="#fff" size="28"></u-icon>
            </view>
          </view>

        </view>
        <!-- 内容区域底部部分 -->
        <view class="content_bottom">
          <view class="bottom_1">
            <!-- 音量减 -->
            <view @click="confirmVolume(-10)">
              <img src="./../../static/img/icon/remoteJian.png" alt="" />
            </view>

            <view>音量:{{ constraintLength }}</view>
            <!-- 音量加 -->
            <view @click="confirmVolume(10)">
              <img src="./../../static/img/icon/remoteJ.png" alt="" />
            </view>
          </view>
          <view class="bottom_2">
            <view @click="start(1)">出泡泡</view>
            <view @click="openMusic()">开启音乐</view>

          </view>
          <view class="bottom_2">
            <view @click="turnTipMusicEnd()">开启提示音</view>
            <view @click="turnTipMusicStop()">关闭提示音</view>
          </view>
          <view class="bottom_3">
            <view @click="openLightEnd()">启动灯光</view>
            <view @click="openLightStop()">关闭灯光</view>

          </view>
          <!-- <view class="bottom_4" @click="clear(5, 0)"  id="specialEffect"> 清除订单 </view> -->
          <view class="bottom_4" @click="clear(5, 0)" v-if="vButtonPermissions">
            <view class="clear_btn">
              <view>

                清除订单
              </view>
              <view class="title_right title_text">
                <BaseIconModal name="question-circle" size="30" width="300" color="#fff" v-if="prompt">
                  <view>

                    {{ prompt }}
                  </view>
                </BaseIconModal>
              </view>
            </view>
          </view>
        </view>

      </view>
      <view class="remote_content" v-else>
        <view class="content_top"> </view>
        <view class="content_bottom">
          <view class="bottom_2">
            <view @click="startGameDevice(2, 1)" id="specialEffect">开启泡泡+音乐60秒</view>
            <view @click="startMusic(1)" id="specialEffect">开启音乐60秒</view>
            <view @click="stop(-1)" style="margin-top: 8px" id="specialEffect">停止</view>
          </view>
        </view>
      </view>
    </view>
    <BaseModal :show.sync="isShowStartModal" @confirm="confirmStart">
      <view slot="default">
        <BaseInput v-model="length_time" :disabled="vInputDisable"   placeholder="请输入启动时长(分钟)" />
      </view>
    </BaseModal>
    <!-- 控制音乐时长 -->
    <BaseModal :show.sync="isShowMusicModal" @confirm="confirmMusicLength">
      <view slot="default">
        <BaseInput v-model="adjust_time" placeholder="请输入播放时长(分钟)" />
      </view>
    </BaseModal>
    <!-- 控制灯光 -->
    <BaseModal :show.sync="isShowLightModal" @confirm="confirmLight">
      <view slot="default" class="default">
        如果你用的是充电宝设备将会导致设备离线
      </view>
      <view slot="default" class="default">
        您确认要关闭灯光吗吗？
      </view>
    </BaseModal>
    <!-- 出泡泡提示 -->
    <BaseModal :show.sync="isShowStartMain" @confirm="comfirmStartMain">
      <TextLength :num="length_time"></TextLength>

        </BaseModal>
    <!-- 开启灯光 -->
    <!-- <BaseModal :show.sync="isShowMusicEndeModal" @confirm="turnTipMusicEnd">
      <view class="time_tiltle">
        选择灯光开启时间
      </view>
      <view class="time">
        <TimeSelectHour v-model="startTime" placeholder="请选择开始时间" :defaultTime="startTime" />
        <TimeSelectHour class="end-time" v-model="endTime" placeholder="请选择结束时间" :defaultTime="endTime" />
      </view>
    </BaseModal> -->
    <!-- 关闭提示音 -->

    <BaseModal :show.sync="isShowMusicStopModal" @confirm="confirmMusicStopLength">
      <view slot="default" class="default">
        如果关闭提示音会减少互动效果将影响收入
      </view>
      <view slot="default" class="default">
        您确认要关闭提示音吗？
      </view>
    </BaseModal>
  </view>
</template>

<script>
import BaseNavbar from "../../components/base/BaseNavbar.vue";
import BasePopup from "@/components/base/BasePopup.vue";
import BaseModal from "@/components/base/BaseModal.vue";
import BaseInput from "@/components/base/BaseInput.vue";
import BaseRadio from "@/components/base/BaseRadio.vue";
import BaseButton from "@/components/base/BaseButton.vue";
import BaseSlider from '@/components/base/BaseSlider';
import TimeSelectHour from "@/components/common/TimeSelectHour.vue";
import BaseIconModal from "@/components/base/BaseIconModal.vue";
import { timestampToTime } from "@/common/tools/utils.js";
import TextLength from '@/components/text/TextLength.vue'
export default {
  components: {
    BaseNavbar,
    BaseModal,
    BaseInput,
    BaseRadio,
    BaseButton,
    BaseSlider,
    BasePopup,
    TimeSelectHour,
    BaseIconModal,
    TextLength


  },
  data() {
    return {
      prompt: '清除正在进行的订单',
      title: "遥控设备",
      fromData: "", //来源
      isFromIndexScan: false, //首页扫码来的
      hotelLocation: "", //商户名称
      mid: "",
      device_sn: "",
      selectIndex: 0, //选中数据项
      length_time: 1, //音乐时长
      selectLightRadio: 1,
      constraintLength: 100,
      isFromReplenish: 0,
      adjust_time: 1, //音乐时长
      isShowStartModal: false, // 是否显示启动时间
      isShowMusicModal: false, //是否显示输入音乐时长
      isShowLightModal: false, // 是否关灯
      isShowStartMain: false,//出泡泡超过三分提示
      isShowMusicStopModal: false,//关闭提示音
      isShowMusicEndeModal: false,//清除提示音
      startTime: '09:00',
      endTime: '22:00',
      light: false,//灯光开关
      music: false,//提示音开关
      status: 1,//是否在线
      value: 0,//进度条
      slider: false,
      disable: false,//防抖开关
      lastOrderTime: 0,

      ligthList: [
        {
          title: "关灯",
          name: 1,
          selectIndex: 0,
        },
        {
          title: "开灯",
          name: 2,
          selectIndex: 1,
        },
      ],
    };
  },
  methods: {
    /* 防抖 */
    setTime() {
      let timestamp = new Date().valueOf();
      if (timestamp - this.lastOrderTime < 5000) {
        uni.showToast({
          title: `其他指令正在执行请等${5 - ((timestamp - this.lastOrderTime) / 1000).toFixed(0)}秒后进行其他操作`,
          icon: "none",
          duration: 1500,
        });
        console.log('进来了节流')
        // this.lastOrderTime = timestamp;
        return false;
      } else {
        this.lastOrderTime = timestamp;
        console.log('时间大于10秒')
        return true;
      }
    },
    // 调节音量
    confirmVolume(i) {
      if (!this.setTime()) {
        return
      }
      if (this.isFromReplenish) {
        if (this.constraintLength >= 0) {
          this.constraintLength += i;
          if (this.constraintLength == -10) {
            this.constraintLength = 0;
          } else if (this.constraintLength == 110) {
            this.constraintLength = 100;
          }
          let data = {
            device_sn: this.device_sn,
            volume: this.constraintLength * 0.3,
          };
          this.$u.api.getUserVideo(data).then((res) => {
            this.isShowSuccess(res.msg);
          });
        }
      }
    },
    // 停止游戏设备
    stop(i) {

      // 停止游戏设备
      if (this.isFromReplenish) {
        // 补货管理才能有启动
        this.selectIndex = i;
        this.length_time = 0;
        this.confirmStart();
      }
    },
    // 重置
    clear(model, status) {
      if (!this.setTime()) {
        return
      }
      // 清除设备在使用的状态
      let data = {
        device_sn: this.device_sn,
        model: model, // 5,游戏模式 3，充电模式
        status: status, // 1.正在进行 2.未开始
      };
      // let that = this;
      this.$u.api.clearUMModelStatus(data).then((res) => {
        // this.isShowSuccess("操作成功", 1, () => { }, true);
        this.isShowTwo("操作成功", 1);
      });
    },
    // 开启控制灯
    openLightEnd() {
      if (!this.setTime()) {
        return
      }
      let data = {
        device_sn: this.device_sn,
        status: 1,
      };
      console.log("启动设备结果参数 3 ：", data);
      this.$u.api.turnLight(data).then((res) => {
        console.log("启动设备结果4 ：", res);
        this.light = false
        // this.isShowSuccess("操作成功", 1, () => { }, true);
        this.isShowTwo("操作成功", 1);
      });
    },
    // 关闭控制灯
    openLightStop() {

      this.isShowLightModal = true

    },
    confirmLight() {
      if (!this.setTime()) {
        return
      }
      // 控制灯
      let data = {
        device_sn: this.device_sn,
        status: 0,
      };
      console.log("启动设备结果参数 3 ：", data);
      this.$u.api.turnLight(data).then((res) => {
        console.log("启动设备结果4 ：", res);
        this.light = true
        // this.isShowSuccess("操作成功", 1, () => { }, true);
        this.isShowTwo("操作成功", 1);
      });
    },
    turnTipEnd() {
      this.isShowMusicEndeModal = true
    },
    // 开启提示音
    turnTipMusicEnd() {
      if (!this.setTime()) {
        return
      }
      let data = {
        device_sn: this.device_sn,
        status: 1,
        // startTime: this.startTime,
        // endTime: this.endTime
      };
      // this.isShowMusicStopModal = true
      console.log("启动设备结果参数 3 ：", data);
      this.$u.api.turnTipMusic(data).then((res) => {
        console.log("启动设备结果4 ：", res);
        this.music = false
        // this.isShowSuccess("操作成功", 1, () => { }, true);
        this.isShowTwo("操作成功", 1);
      });
    },
    exit() {
      this.isShowMusicStopModal = false
    },
    // 关闭提示音
    turnTipMusicStop() {

      this.isShowMusicStopModal = true

    },
    confirmMusicStopLength() {
      if (!this.setTime()) {
        return
      }
      let data = {
        device_sn: this.device_sn,
        status: 0,
      };
      console.log("启动设备结果参数 3 ：", data);
      this.$u.api.turnTipMusic(data).then((res) => {
        console.log("启动设备结果4 ：", res);
        this.music = true
        // this.isShowSuccess("操作成功", 1, () => { }, true);
        this.isShowTwo("操作成功", 1);
      });
    },

    //游戏设备，启动游戏设备
    start(i) {

      this.length_time = 1
      console.log(i);
      if (this.isFromReplenish) {
        // 补货管理才能有启动
        this.selectIndex = i;
        this.isShowStartModal = true;
      }
    },
    confirmStart() {
      // 开启游戏设备
      // this.isShowProgress = true
      if (this.length_time >= 3) {
        this.isShowStartMain = true
      } else {

        this.startGameDevice(this.selectIndex + 1, this.length_time);
      }
    },
    comfirmStartMain() {
      this.startGameDevice(this.selectIndex + 1, this.length_time);
    },

    startGameDevice(channel, time) {
      // 启动设备
      console.log("启动设备结果参数 2 ：", data);
      let data = {
        device_sn: this.device_sn,
        channel: channel, // 货道
        length_time: time,
      };
      console.log("启动设备结果参数 3 ：", data);
      this.$u.api.startUM(data).then((res) => {
        console.log("启动设备结果4 ：", res);
        // this.isShowSuccess("操作成功", 1, () => { }, true);
        this.isShowTwo("操作成功", 1);
      });
    },
    // 播放音乐时长
    openMusic() {

      if (this.isFromReplenish) {
        this.isShowMusicModal = true;
      }
    },
    // 播放音乐时长
    confirmMusicLength() {
      if (!this.setTime()) {
        return
      }
      this.startMusic(this.adjust_time);
    },
    // 播放音乐
    startMusic(time) {

      let data = {
        device_sn: this.device_sn,
        length_time: time, //获取子组件传来的数据
      };
      this.$u.api.startMusic(data).then((res) => {
        console.log(res);
        this.isShowSuccess(res.msg);
      });
    },
    async getActive() {

      let data = {
        mid: this.mid,
      };
      let rtn = await this.$u.api.isActive(data);
      this.device_sn = rtn?.device_sn;
    },
    activeMachine() {

      //领取设备
      let data = {
        device_sn: this.device_sn,
      };

      this.$u.api.activeMachine(data).then((res) => {
        this.isShowSuccess("领取成功", 0, this.getActive());
      });
    },
    // 获取商户
    getHotel() {

      let data = {
        mid: this.mid,
      };
      this.$u.api.getUMHotel(data).then((res) => {
        console.log(res, "获取商户------------");
        this.hotelLocation = res[0].hotelName;
        this.status = res[0].status
        this.startTime = res[0].startTime || '09:00'
        this.endTime = res[0].endTime || '22:00'
        console.log('是否在线', this.status)
        this.hotelLocation = this.hotelLocation.substring(0, 7);
      });
    },
    /* 刷新状态 */
    updata() {
      if (!this.setTime()) {
        return
      }
      this.value = 0
      this.slider = true
      this.disable = true
      /* 发送请求 */
      let time = setInterval(() => {
        if (this.value < 100) {
          this.value = this.value + 20
        }
        console.log('value', this.value)
      }, 1000);
      let time2 = setTimeout(() => {
        clearInterval(time)
        this.slider = false
        this.disable = false
        /* 发送请求 */
      }, 5000)
    }
  },
  onLoad(opt) {
    console.log(opt, ">>>>>>>>>>>>>>>>>");
    if (opt?.from) {
      this.fromData = opt.from;
      if (this.fromData == "replenish") {
        //补货来的
        this.title = "遥控设备";
        this.isFromReplenish = true;
        this.device_sn = opt.device_sn;

      }
    }
    if (opt.mid) {
      this.mid = opt.mid;
      this.getActive();
      this.getHotel();
    }
    if(this.vInputDisable){
      this.length_time=this.vTime
    }
  },
  onShow(e) {
    let pages = getCurrentPages();
    let currPage = pages[pages.length - 1]; // 当前页
    console.log(currPage);
  },
};
</script>
<style lang="scss">
page {
  background-color: $pageBgColor;
}
</style>
<style lang="scss" scoped>
.title_right {
  position: relative;
  width: 30rpx;
  height: 30rpx;
  // border: 1px solid #000;
  margin-left: 15rpx;
}

.title_text {
  font-size: 28rpx;
  color: #333;
}

.clear_btn {
  // border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.RemoteEquipment {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  overflow: auto;

  #specialEffect {
    transition: all 1.2ms ease-in;
  }

  #specialEffect:hover {
    background: linear-gradient(100deg, #46a1ff 0%, rgb(255, 91, 91) 100%);

  }

  .time {
    display: flex;
    padding: 20rpx;
    justify-content: space-between;

    .end-time {
      margin-left: 20rpx;
    }
  }

  .time_tiltle {
    text-align: center;
    margin: 20rpx auto;
  }

  .remote {
    width: 100%;
    height: 100%;
    padding: 80rpx 50rpx 0rpx 50rpx;
    box-sizing: border-box;

    .remote_top {
      width: 85%;
      margin: auto;
      color: #666;
      display: flex;
      margin-top: 35rpx;
      border-radius: 15rpx;
      margin-bottom: 35rpx;
      flex-direction: column;
      text-align: center;
      font-size: 28rpx;
      padding: 15rpx 0;
      // border: 1px solid #000;
      // background-color: #e7e7e7;

      &>view {
        // flex: 1;
        // text-align: center;
      }

      &>view:nth-child(1) {
        padding: 0 15rpx;
        // border-right: 1rpx solid #333;
        margin-right: 10rpx;
      }

      &>view:nth-child(2) {
        overflow: hidden;
        white-space: nowrap;
        text-align: nowrap;
        padding: 0 15rpx;
        // border: 1px solid #000;
      }
    }

    .remote_content {

      width: 100%;
      min-height: 600rpx;
      max-height: auto;
      background: rgb(255, 255, 255);
      z-index: 1;
      border-radius: 20rpx;
      box-shadow: rgba(#333, 20%);
      overflow: hidden;
      margin-top: 15rpx;
      position: relative;

      .content_top {
        // left: 0;
        // top: 0;
        // position: absolute;
        margin: 15rpx 5rpx;


      }

      .content_center {
        // width: 100%;
        height: 340rpx;
        display: flex;
        // flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 55rpx;
        text-align: center;

        .bilud {
          margin: 20rpx;
          border-radius: 50%;

        }

        img {
          width: 260rpx;
          height: 260rpx;
        }
      }

      .content_bottom {
        margin-top: 40rpx;
        width: 100%;
        padding: 0px 55rpx;

        &>view {
          font-weight: bold;
          font-size: 34rpx;
          margin-bottom: 25rpx;
        }

        .off_box {
          justify-content: space-between;
          display: flex;
          margin: 0 30rpx;
          // border: 1px solid #000;
          height: 38rpx;
          font-size: 20rpx;
          align-items: center;
        }

        .off_updata {
          border-radius: 20rpx;
          padding: 2rpx 10rpx;
          display: flex;
          justify-content: space-between;
          color: white;
          background-color: #46a1ff;

          text {
            margin-right: 5rpx;
          }
        }

        .center_off {

          display: flex;

          // border: 1px solid #000;
          >view {
            display: flex;
          }

          .center_off_text {
            margin-right: 5rpx;
          }

          .center_off_adio {
            border-radius: 20rpx;
            background-color: #e6e6e6;
            padding: 2rpx 5rpx;

            >view {
              border-radius: 20rpx;
              padding: 2rpx 12rpx;
            }
          }

          .light_off {
            color: white;

            background-color: #46a1ff;

          }

          .light_on {
            color: white;
            background-color: orangered;
          }
        }

        .bottom_1 {
          width: 100%;
          height: 111rpx;
          background: rgb(247, 247, 247);
          border-radius: 10rpx;
          padding: 18rpx 26rpx;
          box-sizing: border-box;
          overflow: hidden;
          display: flex;
          justify-content: space-around;
          align-items: center;
          font-size: 30rpx;
          font-weight: bold;

          &>view:nth-child(1) {
            width: 126rpx;
            height: 100%;
            cursor: pointer;
            border-radius: 8rpx;
            background: #46a1ff;
            display: flex;
            justify-content: center;
            align-items: center;

            &>img {
              width: 45rpx;
              height: 45rpx;
            }
          }

          &>view:nth-child(3) {
            width: 126rpx;
            height: 100%;
            border-radius: 8rpx;
            background: #46a1ff;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            &>img {
              width: 45rpx;
              height: 45rpx;
            }
          }
        }

        .bottom_2 {
          width: 100%;
          display: flex;
          height: 85rpx;
          justify-content: space-between;
          flex-wrap: wrap;
          color: rgb(255, 255, 255);

          &>view {
            width: 260rpx;
            height: 85rpx;
            line-height: 85rpx;
            background: #46a1ff;
            border-radius: 8rpx;
            text-align: center;
            box-sizing: border-box;
            font-weight: 600;
            cursor: pointer;
          }
        }

        .bottom_3 {
          width: 100%;
          display: flex;
          height: 95rpx;
          justify-content: space-between;
          color: rgb(255, 255, 255);

          &>view {
            width: 260rpx;
            height: 85rpx;
            line-height: 85rpx;
            background: #46a1ff;
            border-radius: 8rpx;
            text-align: center;
            font-weight: 600;
            cursor: pointer;
          }
        }

        .bottom_4 {
          width: 100%;
          color: rgb(255, 255, 255);
          height: 85rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          // line-height: 85rpx;
          background: linear-gradient(100deg,
              rgb(233, 39, 39) 0%,
              rgb(255, 91, 91) 100%);
          box-sizing: border-box;
          text-align: center;
          border-radius: 8rpx;
          font-weight: 600;
          cursor: pointer;
          margin-top: 60rpx;
          margin-bottom: 100rpx;
        }
      }
    }
  }

}

.off_title_box {
  margin: 10rpx 0;
  // border: 1px solid #000;
  justify-content: center;
  display: flex;

  .center_off {

    display: flex;

    // border: 1px solid #000;
    >view {
      display: flex;
    }

    .center_off_text {
      margin-right: 5rpx;
    }

    .center_off_adio {
      font-size: 20rpx;
      border-radius: 20rpx;
      background-color: #e6e6e6;
      padding: 2rpx 5rpx;

      >view {
        border-radius: 20rpx;
        padding: 2rpx 12rpx;
      }
    }

    .light_off {
      color: white;

      background-color: #46a1ff;

    }

    .light_on {
      color: white;
      background-color: orangered;
    }
  }
}

.default {
  text-align: center;
  font-size: 26rpx;
}
</style>